<template>
  <div class="body">
    <div class="box">
      <header class="header" style="display: flex">
        <h2 style="color: #07c160">豆瓣</h2>
        <van-search v-model="value" placeholder="搜索" />
        <van-icon size="26px" name="bag-o" />
        <van-button round type="success">成功按钮</van-button>
      </header>
    </div>
    <main class="main">
      <van-card
      @click="{xqy}"
      v-for="item in list"
        :price="item.price"
        :title="item.title"
        :thumb="item.image"
      />
    </main>
  </div>
</template>

<script setup>
// import router
import request from "./uitle/request";
import { onMounted,ref } from "vue";
import router from "./router";
const list = ref([])
onMounted(() => {
  // console.log(`the component is now mounted.`)
  request.get("/list", {
      //pagination, pageNum
      params: { pagination: 1, pageNum: 30 },
    })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
    });
});
const xqy = () => {
  router.push('/xq')
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  
}
.box {
  display: flex;
  flex-direction: column-reverse;
  top: 0;
  left: 0;
}
.header {
  height: 50px;
}
</style>